<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商城数据</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico">
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,700,900" rel="stylesheet">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/notifications/Lobibox.min.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/datetimepicker/bootstrap-datetimepicker.min.css">
    <link rel="stylesheet" href="css/owl.carousel.css">
    <link rel="stylesheet" href="css/owl.theme.css">
    <link rel="stylesheet" href="css/owl.transitions.css">
    <link rel="stylesheet" href="css/animate.css">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/meanmenu.min.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/educate-custon-icon.css">
    <link rel="stylesheet" href="css/morrisjs/morris.css">
    <link rel="stylesheet" href="css/scrollbar/jquery.mCustomScrollbar.min.css">
    <link rel="stylesheet" href="css/metisMenu/metisMenu.min.css">
    <link rel="stylesheet" href="css/metisMenu/metisMenu-vertical.css">
    <link rel="stylesheet" href="css/calendar/fullcalendar.min.css">
    <link rel="stylesheet" href="css/calendar/fullcalendar.print.min.css">
    <link rel="stylesheet" href="css/form/all-type-forms.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/responsive.css">
    <script src="js/vendor/modernizr-2.8.3.min.js"></script>
    <style>
        .box {
            height: 400px;
            margin: 20px 0;
        }

        .nday {
            float: right;
        }
    </style>
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade
    your browser</a> to improve your experience.</p>
<![endif]-->
<!-- Start Left menu area -->
<div class="left-sidebar-pro">
    <nav id="sidebar" class="">
        <div class="sidebar-header">
            <a href="index.html"><img class="main-logo" src="img/logo/logo.png" alt=""/></a>
            <strong><a href="index.html"><img src="img/logo/logosn.png" alt=""/></a></strong>
        </div>
        <div class="left-custom-menu-adp-wrap comment-scrollbar">
            <nav class="sidebar-nav left-sidebar-menu-pro">
                <ul class="metismenu" id="menu1">
                    <li>
                        <a title="Landing Page" href="report.html" aria-expanded="false"><span
                                class="fa fa-user-circle-o" aria-hidden="true"></span> <span
                                class="mini-click-non">商城数据</span></a>
                    </li>
                    <li class="active">
                        <a class="has-arrow" href="index.html">
                            <span class="fa fa-id-card"></span>
                            <span class="mini-click-non">用户信息</span>
                        </a>
                        <ul class="submenu-angle" aria-expanded="true">
                            <li><a href="index.html"><span class="mini-sub-pro">用户列表</span></a></li>
                            <li><a href="goodsManager.html"><span class="mini-sub-pro">商品列表</span></a></li>
                            <li><a href="order.html"><span class="mini-sub-pro">订单管理</span></a></li>
                            <li><a href="classify.html"><span class="mini-sub-pro">类目管理</span></a></li>
                            <li><a href="sc.html"><span class="mini-sub-pro">客户服务</span></a></li>
                        </ul>
                    </li>
                    <li>
                        <a title="Landing Page" href="adminUser.html" aria-expanded="false"><span
                                class="fa fa-user-circle-o" aria-hidden="true"></span> <span
                                class="mini-click-non">系统用户</span></a>
                    </li>
                </ul>
            </nav>
        </div>
    </nav>
</div>
<!-- End Left menu area -->
<!-- Start Welcome area -->
<div class="all-content-wrapper">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="logo-pro">
                    <a href="index.html"><img class="main-logo" src="img/logo/logo.png" alt=""/></a>
                </div>
            </div>
        </div>
    </div>
    <div class="header-advance-area">
        <div class="header-top-area">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <div class="header-top-wraper">
                            <div class="row">
                                <div class="col-lg-1 col-md-0 col-sm-1 col-xs-12">
                                    <div class="menu-switcher-pro">
                                        <button type="button" id="sidebarCollapse"
                                                class="btn bar-button-pro header-drl-controller-btn btn-info navbar-btn">
                                            <i class="fa fa-bars"></i>
                                        </button>
                                    </div>
                                </div>

                                <div class="col-lg-5 col-md-5 col-sm-12 col-xs-12 col-lg-offset-6 col-md-offse-7 col-sm-offse-6 col-xs-offse-12">
                                    <div class="header-right-info">
                                        <ul class="nav navbar-nav mai-top-nav header-right-menu">
                                            <li class="nav-item">
                                                <a href="#" data-toggle="dropdown" role="button" aria-expanded="false"
                                                   class="nav-link dropdown-toggle">
                                                    <img id="headImgs" src="img/product/pro4.jpg" alt=""
                                                         style="width: 26px;height: 26px;border-radius: 100%"/>
                                                    <span class="admin-name" id="headName"></span>
                                                    <i class="fa fa-angle-down edu-icon edu-down-arrow"></i>
                                                </a>
                                                <ul role="menu"
                                                    class="dropdown-header-top author-log dropdown-menu animated zoomIn">

                                                    <li><a onclick="logOut()"><span
                                                            class="edu-icon edu-locked author-log-ic"
                                                            style="cursor:pointer"></span>登出</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="container-fluid" style="padding: 20px 15px 0 15px;">
            <div style="background-color: #ffffff; border-radius: 3px; padding: 12px;">
                <!--在此添加-->
                <div class="row">
                    <div id="box1" class="box col-lg-6"></div>
                    <div id="box2" class="box col-lg-6"></div>
                    <div id="box3" class="box col-lg-6"></div>
                    <div id="box4" class="box col-lg-6"></div>
                    <div id="box5" class="box col-lg-6"></div>
                    <div id="div6" class="box col-lg-6" onclick="box6()">
                        <select class="nday" id="number">
                            <option value="30">近30天</option>
                            <option value="60">近60天</option>
                        </select>
                        <div id="box6" class="box"></div>
                    </div>
                    <!--在此添加-->
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="js/vendor/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/wow.min.js"></script>
<script src="js/jquery-price-slider.js"></script>
<script src="js/jquery.meanmenu.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.sticky.js"></script>
<script src="js/jquery.scrollUp.min.js"></script>
<script src="js/counterup/jquery.counterup.min.js"></script>
<script src="js/counterup/waypoints.min.js"></script>
<script src="js/counterup/counterup-active.js"></script>
<script src="js/scrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="js/scrollbar/mCustomScrollbar-active.js"></script>
<script src="js/metisMenu/metisMenu.min.js"></script>
<script src="js/metisMenu/metisMenu-active.js"></script>
<script src="js/sparkline/jquery.sparkline.min.js"></script>
<script src="js/sparkline/jquery.charts-sparkline.js"></script>
<script src="js/sparkline/sparkline-active.js"></script>
<script src="js/calendar/moment.min.js"></script>
<script src="js/calendar/fullcalendar.min.js"></script>
<script src="js/calendar/fullcalendar-active.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<script src="js/data-table/bootstrap-table.js"></script>
<script src="js/data-table/bootstrap-table-zh-CN.js"></script>
<script src="js/notifications/Lobibox.js"></script>
<script src="js/datepicker/bootstrap-datetimepicker.min.js"></script>
<script src="js/datepicker/bootstrap-datetimepicker.zh-CN.js"></script>
<script src="js/jquery.validate.min.js" type="application/javascript"></script>
<script src="localization/messages_zh.min.js"></script>
<script src="js/my/meValidate.js"></script>
<script src="js/echarts.min.js"></script>
<script>
    var nday = $('#div6 option:selected').val();
    getPie(nday);

    $('#div6').change(function () {
        newday = $('#div6 option:selected').val(), getPie(newday)
    })

    function getPie(day) {
        console.log(day);
        $.ajax({
            url: 'http://localhost:8080/posterior_system_war_exploded/echarts',
            async: false,
            dataType: 'json',
            data: {n: day},
            success: function (_data) {
                dataAll = _data;
            }
        })
        box1();
        box2();
        box3();
        box4();
        box5();
        box6();
    }

    //box1 今日新增用户
    function box1() {
        var data = dataAll.todayUser;
        var dom = document.getElementById('box1');
        var myChart = echarts.init(dom, "light");
        var option = {
            tooltip: {
                trigger: 'axis'
            },
            title: {
                text: '今日新增用户',
                subtext: '',
                left: 'center'
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: data.map(x => x.name)
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: data,
                type: 'line',
                smooth: true,
                markPoint: {
                    data: [
                        {type: 'max'},
                    ]
                },
            }]
        };
        myChart.setOption(option, true);
    }

    //box2 今日销售额统计
    function box2() {
        var data = dataAll.todayMoney;
        var dom = document.getElementById('box2');
        var myChart = echarts.init(dom);
        var option = {
            title: {
                text: '今日销售额统计',
                subtext: '',
                left: 'center'
            },
            tooltip: {
                trigger: 'axis'
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: data.map(x => x.name)
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: data,
                type: 'line',
                smooth: true,
                markPoint: {
                    data: [
                        {type: 'max'},
                    ]
                },
            }]
        };
        myChart.setOption(option, true);
    }

    //box3 各类商品销售额统计
    function box3() {
        var data = dataAll.goodsMoney;
        var dom = document.getElementById('box3');
        var myChart = echarts.init(dom, "light");
        var option = {
            title: {
                text: '各类商品销售额统计',
                subtext: '',
                left: 'center'
            },
            tooltip: {
                trigger: 'axis'
            },
            xAxis: {
                type: 'category',
                data: data.map(x => x.name)
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: data,
                type: 'bar',
                label: {
                    show: true,
                    position: 'inside'
                },
            }]
        };
        myChart.setOption(option, true);
    }

    //box4 用户购物车前十商品统计
    function box4() {
        var data = dataAll.topTen;
        var dom = document.getElementById('box4');
        var myChart = echarts.init(dom);
        var option = {
            title: {
                text: '用户购物车前十商品统计',
                subtext: '',
                left: 'center'
            },
            tooltip: {
                trigger: 'axis'
            },
            xAxis: {
                type: 'category',
                data: data.map(x => x.name),
                axisLabel: {interval: 0, rotate: -45}
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: data,
                type: 'bar',
                label: {
                    show: true,
                    position: 'inside'
                },
            }]
        };
        myChart.setOption(option, true);
    }

    //box5 各类商品销售数据占比
    function box5() {
        var data = dataAll.goodsMoney;
        var dom = document.getElementById('box5');
        var myChart = echarts.init(dom, "light");
        var option = {
            title: {
                text: '各类商品销售数据占比',
                subtext: '',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
                type: 'scroll',
                orient: 'vertical',
                right: 10,
                top: 20,
                bottom: 20,
                data: data.map(x => x.name),
            },
            series: [
                {
                    name: '姓名',
                    type: 'pie',
                    radius: '55%',
                    center: ['40%', '50%'],
                    data: data,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        myChart.setOption(option, true);
    }

    //box6 自增用户曲线
    function box6() {
        var data = dataAll.addUser;
        var dom = document.getElementById('box6');
        var myChart = echarts.init(dom, "light");
        var option = {
            title: {
                text: '自增用户曲线',
                left: 'center'
            },
            tooltip: {
                trigger: 'axis'
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: data.map(x => x.name),
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: data,
                type: 'line'
            }]
        };
        myChart.setOption(option, true);
    }
</script>
</html>